<template>
	<svg class="svg-icon"
	     :class="className"
	>
		<use :href="iconName"></use>
	</svg>
</template>

<script setup>
import {computed} from 'vue'

const props = defineProps({
	icon: {
		type: String,
		required: true,
	},
	className: {
		type: String,
	}
})
const iconName = computed(() => `#icon-${props.icon}`)

</script>

<style scoped lang="scss">
.svg-icon {
	width: 1em;
	height: 1em;
	vertical-align: -.15em;
	fill: currentColor;
	overflow: hidden;
	outline: none;
}
</style>